<template>  
	<view class="container">  
		<scroll-view class="scroll-view" scroll-y="true">  
			<view v-for="(item, index) in data" :key="index">  
				<view v-if="item.senderId === user.userId" class="me">  
					<view class="text1-wrapper">  
						<text class="message1-text">{{ item.messageText }}</text>  
					</view>  
					<image class="avatar1" :src="user.avatar"></image>  
				</view>  
				<view v-else class="sender">  
					<image class="avatar" :src="friend.friend_avatar"></image>  
					<view class="text-wrapper">  
						<text class="message-text">{{ item.messageText }}</text>  
					</view>
				</view>  
			</view>  
		</scroll-view>
		<view class="input-container">  
			<input type="text" placeholder="输入消息..." v-model="inputmessage"/>  
			<button @click="sendMessage">发送</button>  
		</view>  
	</view>  
</template>  

<script>  
import { hasLogin, logout, getUserid } from '@/store/index.js'

export default {  
	data() {  
		return {
			inputmessage:"",
			friend: {
				friendId: 0,
				friend_nickname:'',
				friend_avatar:''
			},
			user: {
				userId: 0,
				avatar: '',
				nickName: '',
			},
			data:[],
			conversation: {
				conversationId: 0,
				senderId: 0,
				receiverId: 0,
				messageText: ''
			}
		};  
	},  
	onLoad() {
		if(hasLogin()) {
			let userInfoStr = uni.getStorageSync("userInfo");
			if (userInfoStr) {
				let userInfo = JSON.parse(userInfoStr);				
				this.user.userId = userInfo.userId || '';
				this.user.nickName = userInfo.nickName || '';
				this.user.avatar = userInfo.avatar || '';
			}
		}
		
		this.friend.friendId = this.$route.query.userId;
		this.friend.friend_nickname = this.$route.query.nickName;
		this.friend.friend_avatar = this.$route.query.avatar;
		
		console.log('Friend ID:', this.friend.friendId); // 调试语句，检查 friendId 是否正确设置
		console.log('Friend avatar:', this.friend.friend_avatar);
		if (this.friend.friendId === undefined) {
			// 处理好友ID未定义的情况
			console.error('Friend ID is undefined');
			// 可以进行其他适当的处理，例如给出提示信息或者跳转到其他页面
			return;
		}

		uni.setNavigationBarTitle({  
			title: this.friend.friend_nickname// 进来设置标题就使用好友的名字
		});
		
		this.getuserMessage()
		
	},
	methods:{
		sendMessage(){
			uni.request({
				url:'http://localhost:8090/api/conversations/create-and-send',
				method:'POST',
				data: {
					senderId: this.user.userId, // 当前用户的ID
					receiverId: this.friend.friendId, // 假设对话的接收者ID为2
					messageText: this.inputmessage
				},
				success: (res) => {
					// 发送成功
					// 刷新页面（可选）
					this.getuserMessage();
					// 消息发送成功，清空输入框
					this.inputmessage = ''
				},
				fail: (err) => {
					console.error('发送消息失败', err);
				}
			})
		},
		getuserMessage() {
			uni.request({
				url:`http://localhost:8090/api/conversations/messages/${this.user.userId}/${this.friend.friendId}`,
				method: 'GET',
				success: (res) => {
					console.log("发送者：",this.user.userId),
					console.log("接受者：",this.friend.friendId),
					// 成功获取消息记录后，更新好友列表
					console.log(res),
					this.data = res.data.data; // 假设后端返回的消息数据格式与原始数据一致
					
					console.log("this.data: ", this.data);
				},
				fail: (err) => {
					console.error('获取用户消息记录失败', err);
				}
			})
		}
		
	}
};  
</script>  

<style scoped>  
.container {  
	display: flex;  
	flex-direction: column;  
	justify-content: flex-start;  
	align-items: stretch;  
	height: 100vh;   
	background-color: rgba(255, 255, 255, 0.6); 
}
.scroll-view {
	flex: 1; 
}
.avatar {  
	width: 50px;  
	height: 50px;  
	border-radius: 50%;  
	object-fit: cover; 
	margin-top: 20px;
}
.avatar1 {  
	width: 50px;  
	height: 50px;  
	border-radius: 50%;  
	object-fit: cover;  
	margin-top: 20px;
	margin-left: 10px;
	position: absolute;
	right: 0;
	margin-right: 10px;
} 
.sender {
	display: flex;
}
.sender image {
	margin-top: 10px;
	margin-left: 10px;
}  
.text-wrapper {  
	display: flex;  
	flex-direction: column;  
	background-color: rgba(169, 169, 169, 0.2);  
	padding: 10px;  
	border-radius: 10px;  
	max-width: 70%;   
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	margin-top: 20px;
	margin-left: 10px;
}
.text1-wrapper {  
	display: flex;  
	flex-direction: column;  
	background-color: rgb(0, 191, 255);  
	padding: 10px;  
	border-radius: 10px;  
	max-width: 70%;  
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	margin-top: 20px;
	margin-right: 70px;
	margin-left: auto; /* 将文本容器右对齐 */
	text-align: left; /* 将文本右对齐 */
}

.message-text {  
	word-wrap: break-word;  
	white-space: pre-wrap;
    color: black;
}
.message1-text {  
	word-wrap: break-word;  
	white-space: pre-wrap;
    color: white;
}
.me {
	display: flex;
}
.input-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); 
}

.input-container input {
  flex: 1; 
  height: 30px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 15px;
  outline: none;
}

.input-container button {
  height: 30px;
  padding: 0 15px;
  margin-left: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  line-height: 25px;
}

.input-container button:hover {
  background-color: #0056b3;
}
</style>
